import { Dropdown, Menu } from "antd";
import React from "react";
import styles from './index.module.sass';

interface Item {
    /**列表项的展示名称 */
    name: string,

    /**列表项对应执行的函数 */
    action: Function
}

export interface Props {
    /**下拉菜单的列表项 */
    list: Item[]
}

const DropdownMenu: React.FC<Props> = props => {
    console.debug('DropdownMenu', props);

    const MenuPanel = (
        <Menu className={styles.menu} onClick={handleClick}>
            {props.list.map(item =>
                <Menu.Item key={item.name}>{item.name}</Menu.Item>
            )}
        </Menu>
    )


    function handleClick(params: any) {
        let item = props.list.find(item => item.name === params.key);
        if (item && item.action) {
            item.action();
        }
    }

    return (
        <Dropdown overlay={MenuPanel} placement="bottomLeft" arrow>
            {props.children}
        </Dropdown>
    );
}

export default DropdownMenu;